<template>
  <div class="bg-white m-4 mr-0 overflow-hidden">
  <a-spin :spinning="loading">
    <template v-if="userIdentity === '2'">
      <!--组织机构树-->
      <BasicTree
          v-if="!treeReloading"
          title="部门列表"
          toolbar
          search
          showLine
          :checkStrictly="true"
          :clickRowToExpand="false"
          :treeData="treeData"
          :selectedKeys="selectedKeys"
          :expandedKeys="expandedKeys"
          :autoExpandParent="autoExpandParent"
          @select="onSelect"
          @expand="onExpand"
          @search="onSearch"
      />
    </template>
    <a-empty v-else description="普通员工无此权限"/>
  </a-spin>
  </div>
</template>

<script lang="ts" setup>
import { inject, nextTick, ref } from 'vue'
import { useMessage } from '/@/hooks/web/useMessage'
import { BasicTree } from '/@/components/Tree'
import { queryMyDepartTreeList, searchByKeywords } from '../depart.user.api'

const prefixCls = inject('prefixCls')
const emit = defineEmits(['select'])
const { createMessage } = useMessage()

let loading = ref<boolean>(false)
// 部门树列表数据
let treeData = ref<any[]>([])
// 当前展开的项
let expandedKeys = ref<any[]>([])
// 当前选中的项
let selectedKeys = ref<any[]>([])
// 是否自动展开父级
let autoExpandParent = ref<boolean>(true)
// 用户身份
let userIdentity = ref<string>('2')
// 树组件重新加载
let treeReloading = ref<boolean>(false)

// 加载部门信息
function loadDepartTreeData() {
  loading.value = true
  treeData.value = []
  queryMyDepartTreeList().then(res => {
    if (res.success) {
      if (Array.isArray(res.result)) {
        treeData.value = res.result
        userIdentity.value = res.message
        autoExpandParentNode()
      }
    } else {
      createMessage.warning(res.message)
    }
  }).finally(() => loading.value = false)
}

loadDepartTreeData()

// 自动展开父节点，只展开一级
function autoExpandParentNode() {
  let keys: Array<any> = []
  treeData.value.forEach((item, index) => {
    if (item.children && item.children.length > 0) {
      keys.push(item.key)
    }
    if (index === 0) {
      // 默认选中第一个
      setSelectedKey(item.id, item)
    }
  })
  if (keys.length > 0) {
    reloadTree()
    expandedKeys.value = keys
  }
}

// 重新加载树组件，防止无法默认展开数据
async function reloadTree() {
  await nextTick()
  treeReloading.value = true
  await nextTick()
  treeReloading.value = false
}

/**
 * 设置当前选中的行
 */
function setSelectedKey(key: string, data?: object) {
  selectedKeys.value = [key]
  if (data) {
    emit('select', data)
  }
}

// 搜索事件
function onSearch(value: string) {
  if (value) {
    loading.value = true
    searchByKeywords({ keyWord: value, myDeptSearch: '1' }).then(result => {
      if (Array.isArray(result)) {
        treeData.value = result
      } else {
        createMessage.warning('未查询到部门信息')
        treeData.value = []
      }
    }).finally(() => loading.value = false)
  } else {
    loadDepartTreeData()
  }
}

// 树选择事件
function onSelect(selKeys, event) {
  if (selKeys.length > 0 && selectedKeys.value[0] !== selKeys[0]) {
    setSelectedKey(selKeys[0], event.selectedNodes[0].props)
  } else {
    // 这样可以防止用户取消选择
    setSelectedKey(selectedKeys.value[0])
  }
}

// 树展开事件
function onExpand(keys) {
  expandedKeys.value = keys
  autoExpandParent.value = false
}
</script>
